<template>
  <NModal :show="dialogFormVisible" @onUpdateShow="close">
    <div ref="modalRef" class="edit-dia" style="width: 800px">
      <MacHeader
        :title="title"
        :is-fullscreen="isFullscreen"
        :show-desc="false"
        @toggle="toggle"
        @close="close"
      />
      <div class="content">
        <n-tabs type="line" animated>
          <n-tab-pane name="base" tab="基础信息" display-directive="show">
            <NScrollbar style="height: 400px">
              <div style="padding-left: 5px">
                <BaseInfo ref="form1Ref" />
              </div>
            </NScrollbar>
          </n-tab-pane>
          <n-tab-pane name="netdisk" tab="网盘信息" display-directive="show">
            <NScrollbar style="height: 400px">
              <div style="padding-left: 5px">
                <netdisk-info ref="form2Ref" />
              </div>
            </NScrollbar>
          </n-tab-pane>
        </n-tabs>
        <div class="tool flex justify-end">
          <NButton type="primary" attr-type="button" @click="handSave">
            <span>提交</span>
          </NButton>
        </div>
      </div>
    </div>
  </NModal>
</template>
<script setup lang="ts">
import { ref, nextTick, toRaw } from 'vue'
import { useFullscreen } from '@vueuse/core'
import photoListApi from '@/service/api/photo/list'
import {
  NButton,
  NModal,
  NScrollbar,
  NTabs,
  NTabPane,
  useMessage
} from 'naive-ui'
import MacHeader from '@/components/codeBlock/MacHeader'
import { diaApi } from '@/hooks/addDialog'
import BaseInfo from './view/BaseInfo.vue'
import NetdiskInfo from './view/NetdiskInfo.vue'
const toast = useMessage()
const modalRef = ref()
const { isFullscreen, toggle } = useFullscreen(modalRef)
const emit = defineEmits(['success'])
const form1Ref = ref()
const form2Ref = ref()
const state = {
  emit,
  showEdit: () => {
    nextTick(() => {
      if (queryForm.value?.id) {
        form1Ref.value?.setValue(toRaw(queryForm.value))
        form2Ref.value?.setValue(toRaw(queryForm.value))
      }
    })
  },
  closeExtend() {
    form1Ref.value?.resetFields()
    form2Ref.value?.resetFields()
  },
  queryForm: {
    type_id: '',
    name: '',
    private: 0,
    author_id: '',
    country: '',
    price: '',
    tags: [],
    sort: 1
  }
}
const { dialogFormVisible, queryForm, title, open, close } = diaApi(state)
const loading = ref(false)
const handSave = async () => {
  const res = await Promise.all([
    form1Ref.value.validate(),
    form2Ref.value.validate()
  ])
  const errInfo = res.find((el: any) => !el.valid)
  if (errInfo) {
    toast.error(`请检查${errInfo.name}`)
    return
  }
  let params: any = {}
  res.forEach((el: any) => {
    params = {
      ...params,
      ...el.form
    }
  })
  if (queryForm.value?.id) {
    params.id = queryForm.value.id
  }
  try {
    loading.value = true
    params.id ? await photoListApi.edit(params) : await photoListApi.add(params)
    toast.success(params.id ? '修改成功' : '添加成功')
    emit('success')
    close()
  } finally {
    loading.value = false
  }
}

defineExpose({
  open
})
</script>

<style scoped lang="scss"></style>
